<template>
	<view class="addAddress">
		<view class="content">
			<view class="title">收货人信息</view>
			<view class="item" style="margin-top: 12upx;">
				<text class="left">收货人</text>
				<input maxlength="10" class="right" focus placeholder="请输入联系人姓名" :value='name'  @input="onNameInput" placeholder-class="right-preholder" />
			</view>
			<!-- <view class="line"></view> -->
			<view class="item">
				<text class="left">联系方式</text>
				<input class="right" focus placeholder="请输入有效联系方式" :value='tel' type="number" maxlength="11"  @input="onTelInput" placeholder-class="right-preholder" />
			</view>
			<!-- <view class="line"></view> -->
			<view class="item">
				<text class="left">所在地区</text>
				<view class="right">
<!-- 					<view class="tab"  @tap="toggleTab(item,index)" v-for="(item,index) in tabList" :key="index">{{item.name}}
					</view> -->
					
					<!-- <w-picker 
						mode="region"
						:defaultVal="defaultAdd" 
						@confirm="onConfirm" 
						ref="region" 
					></w-picker> -->
					 <pickerAddress @change="change">{{ province+','+city+','+area|| txt}}</pickerAddress>
<!-- 					<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address> -->
					<!-- <view class="result">选择结果：{{resultInfo.result}}</view> -->
				</view>
				<!-- <input class="right" focus placeholder="省、市、区" :value='location' @input="onLocationInput" placeholder-class="right-preholder" /> -->
			</view>
			<!-- <view class="line"></view> -->
			<view class="item" style="margin-bottom: 26upx;">
				<text class="left">详细地址</text>
				<input class="right" focus placeholder="街道、楼牌等" :value='region' @input="onRegionInput" placeholder-class="right-preholder" />
			</view>
			
		</view>
		<view class="bottom" @click="addAddress">{{btn}}</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import simpleAddress from "@/components/simple-address/simple-address.nvue"
	import pickerAddress from '../../components/pickerAddress/pickerAddress.vue'
export default {
	
	components:{
		wPicker,
		simpleAddress,
		pickerAddress
	},
	data() {
		return {
			id:'',
			btn:'',
			name:'',
			tel:'',
			province:'',
			city:'',
			area:'',
			region:'',
			defaultAdd:['甘肃省','兰州市','城关区'],
			title: 'Hello',
			mode:"range",
			defaultVal:[0,0,0,0,0,0,0],
			cityPickerValueDefault: [0, 0, 1],
			tabList:[
			{
				mode:"region",
				name:"省,市,区"
			}],
			tabIndex:0,
			selectList:[{
				label:"男",
				value:0
			},{
				label:"女",
				value:1
			}],
			resultInfo:{
				result:"2019-12-20 10:00:00"
			},
			txt: '省,市,区',
		};
	},
	onLoad(options) {
		var that = this
		this.btn = options.btn
		//#ifdef H5
		document.title = '编辑地址';
		//#endif
		let address = this.pub.getAddress();
		if(address||address.length>0) {
			let addressArr = address.split(',');
			this.name = addressArr[0];
			this.tel = addressArr[1];
			this.location = addressArr[2];
			this.region = addressArr[3];
		}
		uni.getStorage({
		    key: 'addressArr',
		    success: function (res) {
		        console.log(res.data);
				that.id = res.data.id
				that.name = res.data.receiver
				that.tel = res.data.receiverPhone
				that.region = res.data.address
				that.province = res.data.province
				that.city = res.data.city
				that.area = res.data.town
				that.defaultAdd = []
				that.defaultAdd.push(that.province)
				that.defaultAdd.push(that.city)
				that.defaultAdd.push(that.area)
				that.tabList[0].name = res.data.province + res.data.city + res.data.town 
				if(that.tabList[0].name == ''){
					that.tabList[0].name = "省,市,区"
				}
		    }
		});
	},
	methods:{
		change(data) {
		    this.txt = data.data.join('')
		    console.log(data.data.join(''))
			this.province = data.data[0]
			this.city = data.data[1]
			this.area =data.data[2]
		},
		toggleTab(item,index){
			this.tabIndex=index;
			this.mode=item.mode;
			this.defaultVal=item.value;
			// this.$refs[item.mode].show();
			this.$refs.simpleAddress.open();
		},
		onConfirm(val){
			console.log(val);
			this.tabList[0].name = val.label 
			let areas = val.label.split('-')
			this.province = areas[0]
			this.city = areas[1]
			this.area = areas[2]
			//如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
			// switch(this.mode){
			// 	case "date":
			// 		break;
			// }
			// this.resultInfo=val;
		},
		addAddress() {
			// 添加地址
			let that = this;
			if (that.name == '' || !that.pub.validChineseEnglishChar(that.name) ) {
				uni.showToast({
					icon: 'none',
					title: '收货人只能输入中英文',
					duration: 3000
				});
				return;
			}
			console.log(that.tel)
			if (that.tel == '' || !that.pub.validatePhone(that.tel)) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的手机号码',
					duration: 3000
				});
				return;
			}
			if (that.location == '') {
				uni.showToast({
					icon: 'none',
					title: '所在地区不能为空!',
					duration: 3000
				});
				return;
			}
			if (that.region == '') {
				uni.showToast({
					icon: 'none',
					title: '详细地址不能为空!',
					duration: 3000
				});
				return;
			}
			if (that.region.length > 100) {
				uni.showToast({
					icon: 'none',
					title: '详细地址内容不能超过100字',
					duration: 3000
				});
				return;
			}
			//"地区+","+详细地址+"
			
			
		
				var params = {
					address:this.region,
					province:this.province,
					city:this.city,
					town:this.area,
					receiver:this.name,
					receiverPhone:this.tel,
					openid:this.pub.getUserInfo().openid,
					memberId:this.pub.getUserInfo().memberId,
					id:this.id
				}
			
			this.$postApi(this.$path.ADD_ADDRESS,params).then(res => {
				console.log("新增地址返回结果---------------------》",res.data)
				if(res.data.success){
					this.pub.showError(this.id != ''? '修改地址成功':'新增地址成功')
					uni.removeStorage({
						key:'addressArr',
						success:res=>{
							console.log("清楚缓存中的address")
						}
					})
					setTimeout(function(){
						uni.navigateBack({
						    delta: 1
						});
					},1000)
				}else{
					this.pub.showError(this.id != ''? '修改地址失败':'新增地址失败')
				}
			})
			
			// this.pub.setAddress(address)
			// uni.navigateBack();
		},
		onNameInput(e) {
			this.name = e.detail.value
		},
		onTelInput(e) {
			this.tel = e.detail.value
		},
		onLocationInput(e) {
			this.location = e.detail.value
		},
		onRegionInput(e) {
			this.region = e.detail.value
		}
	}
};
</script>

<style lang="scss">
.addAddress {
	min-height: 100%;
	background: #f5f5f5;
	padding-top: 20upx;
	.tab{
		// padding:20upx 0;
		font-size: 32upx;
	}
	.tab.active{
		color:#f00;
	}
	.result{
		margin-top: 200upx;
		font-size: 32upx;
	}
	.content {
		// display: flex;
		// flex-direction: column;
		// margin-left: 24upx;
		// width: 702upx;
		height: auto;
		background-color: #ffffff;
		padding:0 40upx;
		.line {
			width: 100%;
			height: 1upx;
			background:rgba(237,237,237,1);
		}
		.title {
			font-size: 32upx;
			font-weight: bold;
			line-height: 46upx;
			letter-spacing: 1upx;
			color: #1a1a1a;
			margin-top: 31upx;
		}
		.item:last-child{
			border: 0;
		}
		.item {
			
			width: 100%;
			// height: 84upx;
			display: flex;
			align-items: flex-end;
			padding: 20upx 0 20upx 0;
			border-bottom: 1upx solid rgba(237,237,237,1);
			.left {
				width: 128upx;
				text-align-last: justify;
				height: auto;
				font-size: 30upx;
				flex-shrink: 0;
				font-weight: medium;
				line-height: 47upx;
				color: #4d4d4d;
			}
			.right {
				margin-left: 40upx;
				flex-grow: 1;
				height: auto;
				font-size: 28upx;
				font-weight: regular;
				line-height: 47upx;
				letter-spacing: 0px;
				color: #4d4d4d;
			}
			.right-preholder {
				color: #b3b3b3;
			}
		}
	}
	.bottom {
		position: fixed;
		bottom: 0upx;
		width: 100%;
		height: 109upx;
		background:linear-gradient(-90deg,rgba(255,94,4,1),rgba(249,140,45,1));
		background-blend-mode: normal, normal;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36upx;
		font-weight: medium;
		letter-spacing: 12px;
		color: #ffffff;
	}
	
}
</style>
